<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://unpkg.com/slim-js"></script>
</head>
<body>
    <my-awesome-component name="zs" ></my-awesome-component>
</body>
</html>

<script>


    class AwesomeComponent extends Slim {
        static template=`
            <div>
                  <h1>Welcome, {{this.username}}  {{this.age}}</h1>
                  <span>{{this.count}}</span>
                  <button onclick="this.count++"> + </button>
            </div>


`;

        constructor() {
            super();
            this.age=44;
            this.count = 0;
            this.username = 'John Jimmy Junior';
            window.t=this;
        }

        onCreated() {
            console.log("onCreated")
        }

        onRender() {
            console.log("onRender")
        }

        addAge(){
            alert(88)
            console.log(this.age)
            this.age=this.age+1;
        }

        onAdded() {
            console.log('Added');
        }

        onRemoved() {
            console.log('Removed');
        }

        ck(p){
            console.log("cl",p)
            this.username=p;
        }
    }

    customElements.define('my-awesome-component', AwesomeComponent);
</script>